<template>
	<view>
		<u-navbar :autoBack="true" leftIconColor="#ffffff" title="修改营业时间" :placeholder="true" bgColor="#3ACD90"  :titleStyle="{ color: '#FFFFFF', fontSize: '40rpx' }"></u-navbar>
		<view style="padding:20rpx 30rpx;background-color: #ffffff;;display:flex;justify-content: space-between;align-items: center;">
			<view>营业日</view>
			<view >
				  <u-radio-group
					v-model="radiovalue1"
					placement="row"
					activeColor="#3ACD90"
				  >
					<u-radio
					  v-for="(item, index) in radiolist1"
					  :key="index"
					  :label="item.name"
					  :name="item.name"
					  @change="radioChange1"
					>
					</u-radio>
				  </u-radio-group>
			</view>
			
		</view>
		
		<view v-if="riqishow" style="display: flex;background-color: #ffffff;justify-content: space-around;" >
			<u-tag v-for="(item,index) in taglist" :key="index" @click="tagindex" :name="item.index" :text="item.name" :borderColor="item.borderColor" plain :bgColor="item.bgColor" :color="item.color" ></u-tag>
		</view>
		
		<view style="padding:20rpx 30rpx;background-color: #ffffff;;display:flex;justify-content: space-between;align-items: center;">
			<view>营业时间段</view>
			<view>
				  <u-radio-group
					v-model="radiovalue2"
					placement="row"
					activeColor="#3ACD90"
				  >
					<u-radio
					  v-for="(item, index) in radiolist2"
					  :key="index"
					  :label="item.name"
					  :name="item.name"
					  @change="radioChange2"
					>
					</u-radio>
				  </u-radio-group>
			</view>
		</view>
		
		<view v-if="shijianadd" style="background-color: #ffffff;display: flex; justify-content: space-between; align-items: center;">
			<view @click="startShow=true" style="width: 300rpx;">
				<u-cell :title="startTimeTitle" ></u-cell>
			</view>
			至
			<view @click="endShow=true" style="width: 300rpx;">
				<u-cell :title="endTimeTitle" ></u-cell>
			</view>
		</view>
		  
		<view style="margin-top: 60rpx;">
			<u-button type="primary" color="#3ACD90" text="保存" @click="updateShopTime"></u-button>
		</view>
		
		<u-datetime-picker
			:show="startShow"
			v-model="startTime"
			mode="time"
			@confirm="startTimeConfirm"
			@cancel="startShow = false"
		></u-datetime-picker>
		
		<u-datetime-picker
			:show="endShow"
			v-model="endTime"
			mode="time"
			@confirm="endTimeConfirm"
			@cancel="endShow = false"
		></u-datetime-picker>
		
	</view>
</template>

<script>
	import {
		merinfo,
		merupdate
	} from "@/common/apis/mer.js"
	export default {
		data() {
			return {
				// 基本案列数据
				radiolist1: [{
					name: '每日营业',
					disabled: false
				},
				{
				  name: '选择营业日',
				  disabled: false
				}],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '每日营业',
				
				// 基本案列数据
				radiolist2: [{
					name: '全天',
					disabled: false
				},
				{
				  name: '选择时间段',
				  disabled: false
				}],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue2: '全天',
				taglist:[
					{
						"index":1,
						"name":'周一',
						"borderColor":"#eeeeee",
						"color":"#666666",
						"bgColor":"#eeeeee"
					},
					{
						"index":2,
						"name":'周二',
						"borderColor":"#eeeeee",
						"color":"#666666",
						"bgColor":"#eeeeee"
					},
					{
						"index":3,
						"name":'周三',
						"borderColor":"#eeeeee",
						"color":"#666666",
						"bgColor":"#eeeeee"
					},
					{
						"index":4,
						"name":'周四',
						"borderColor":"#eeeeee",
						"color":"#666666",
						"bgColor":"#eeeeee"
					},
					{
						"index":5,
						"name":'周五',
						"borderColor":"#eeeeee",
						"color":"#666666",
						"bgColor":"#eeeeee"
					},
					{
						"index":6,
						"name":'周六',
						"borderColor":"#eeeeee",
						"color":"#666666",
						"bgColor":"#eeeeee"
					},
					{
						"index":7,
						"name":'周日',
						"borderColor":"#eeeeee",
						"color":"#666666",
						"bgColor":"#eeeeee"
					}
				],
				riqishow:false,

				datePickers: [
				    { 
						id: 1, 
						value: [] ,
					}
				],
				
				shijianadd:false,
				selectTag:[],
				mer_take_day:[1,2,3,4,5,6,7],
				mer_take_time:["00:00","23:59"],

				startTime:"00:00",
				endTime:"23:59",
				startShow:false,
				endShow:false,
				mendianInfo:{},
				startTimeTitle:"开始时间",
				endTimeTitle:"结束时间"
				
				
			}
		},
		onLoad(){
			this.getmerinfo()
		},
		
		methods:{
			getmerinfo(){
				let that = this
				merinfo().then( res => {
					console.log("res",res)
					if(res.status != 200){
						uni.$u.toast('参数有误')
					}else{
						that.mendianInfo = res.data
					}
				})
			},
			updateShopTime(){

				this.mendianInfo.mer_take_time = [this.startTime,this.endTime],
				this.mendianInfo.mer_take_day = this.mer_take_day
				this.mendianInfo.type = 2
				console.log(this.mendianInfo,"sssss")
				merupdate(this.mendianInfo).then( res => {
					console.log('2222',res)
					if(res.status == 200){
						uni.$u.toast('修改成功')
					}else{
						uni.$u.toast('参数有误')
					}
				})
			},
			startTimeConfirm(value){
				this.startShow = false
				this.startTime = value.value
				this.startTimeTitle = value.value
			},
			endTimeConfirm(value){
				this.endShow = false
				this.endTime = value.value
				this.endTimeTitle = value.value
			},
			radioChange1(n) {
				if(n == "选择营业日"){
					this.riqishow = true
					this.mer_take_day = this.selectTag
				}else{
					this.riqishow = false
					this.mer_take_day = [1,2,3,4,5,6,7]
				}
			},
			radioChange2(n) {
				if(n == "选择时间段"){
					this.shijianadd = true
					this.mer_take_time = [this.startTime,this.endTime]
				}else{
					this.shijianadd = false
					this.mer_take_time = ["00:00","23:59"]
				}
			},
			tagindex(e){
				let element = e - 1;
				// 判断元素是否在 this.selectTag 中
				if (this.selectTag.includes(element)) {
				  // 如果元素存在，则从数组中删除
				  const index = this.selectTag.indexOf(element);
				  this.selectTag.splice(index, 1);
				} else {
				  // 如果元素不存在，则添加到数组中
				  this.selectTag.push(element);
				}
				
				this.taglist[element].bgColor = this.selectTag.includes(element) ? "#3ACD90" : "#eeeeee";

			},
			addDatePicker() {
			  const newId = this.datePickers.length + 1;
			  this.datePickers.push({ id: newId, value: [] });
			},
			removeDatePicker(index) {
			  this.datePickers.splice(index, 1);
			}
			
		}
}
</script>

<style>
</style>